<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="layui/css/layui.css" />
		<title>用户管理</title>
	</head>
	<style type="text/css">
		.user-top{
			/*border: 1px solid lawngreen;*/
			margin: 20px 20px 20px 20px;
		}
		.user-top div{
			/*border: 1px solid lawngreen;*/
		}
	</style>
	<body>
		<!--
        	作者：肖静怡
        	时间：2018-09-18
        	描述：用户管理
		-->
		
		<blockquote class="site-text layui-elem-quote">
		   	<h3>用户列表管理</h3>
		</blockquote>
		<div class="user-top">
			<div class="layui-row">
				<div class="layui-col-md5">
					<a href="#" class="layui-btn layui-btn-sm" >添加用户</a>
					<a href="#" class="layui-btn layui-btn-sm layui-btn-danger">批量删除</a>
					<a href="#" class="layui-btn layui-btn-sm">下载导入模板</a>
					<a href="#" class="layui-btn layui-btn-sm">导入</a>
					<a href="#" class="layui-btn layui-btn-sm">导出</a>
				</div>
				<div class="layui-col-md6">
					<label>账号：</label>
					<div class="layui-input-inline">
						<input type="text" name="account1" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
					</div>
					<label>姓名：</label>
					<div class="layui-input-inline">
						<input type="text" name="name1" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
					</div>
					<a href="#" class="layui-btn layui-btn-sm">搜索</a>
				</div>
			</div>
			<hr />
			<div class="layui-row">
				<div class="layui-col-md12">
					<label>账号：</label>
					<div class="layui-input-inline">
						<input type="text" id="account" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
					</div>
					<label>姓名：</label>
					<div class="layui-input-inline">
						<input type="text" id="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
					</div>
					<label>手机号码：</label>
					<div class="layui-input-inline">
						<input type="text" id="mobile" required lay-verify="required" placeholder="请输入手机号码" autocomplete="off" class="layui-input">
					</div>
					<label>籍贯：</label>
					<div class="layui-input-inline">
						<input type="text" id="address" required lay-verify="required" placeholder="请输入籍贯" autocomplete="off" class="layui-input">
					</div>
					<label>出生日期：</label>
					<div class="layui-input-inline">
						<input type="text" id="birthday" required lay-verify="required" placeholder="请输入出生日期" autocomplete="off" class="layui-input">
					</div>
					<a href="#" class="layui-btn layui-btn-sm addUser">添加用户</a>
				</div>
			</div>
				
			<form class="layui-form" action="#" >
				<table id="userTable" class="layui-table" lay-size="sm">
					<colgroup>
					    <col width="50">
					    <col width="100">
					    <col width="100">
					    <col width="100">
					    <col width="100">
					    <col width="100">
					    <col width="100">
					    <col width="180">
					</colgroup>
				  <thead>
				    <tr>
				      	<th><input type="checkbox" lay-skin="primary"></th>
						<th>账号</th>
						<th>姓名</th>
						<th>手机号码</th>
						<th>籍贯</th>
						<th>出生日期</th>
						<th>账号是否启用</th>
						<th>操作</th>
				    </tr> 
				  </thead>
				  <tbody id="tbody">
				    <tr>
				      		<td><input type="checkbox" lay-skin="primary"></td>
							<td>zhangsan</td>
							<td>张三</td>
							<td>18868</td>
							<td>湖南</td>
							<td>2004-08-28</td>
							<td><input type="checkbox" name="" lay-skin="switch"></td>
							<td>
								<a href="#" class="layui-btn layui-btn-sm updateUser">编辑</a>
								<a href="#" class="layui-btn layui-btn-sm">重置密码</a>
								<a href="#" class="layui-btn layui-btn-sm layui-btn-danger deleteUser" >删除</a>
							</td>
				    </tr>
				  </tbody>
				</table>
			</form>
				
				<div class="list_footer">
					<div class="layui-box layui-laypage layui-laypage-default">
						<a class="layui-laypage-prev layui-disabled"><</a>
						<span class="layui-laypage-curr">
							<em class="layui-laypage-em"></em>
							<em>1</em>
						</span>
						<a class="layui-laypage-prev layui-disabled">></a>
					</div>
				</div>
				
			</div>
		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>
		<script type="text/javascript" src="layui/layui.js" ></script>
		<script type="text/javascript">
			layui.use("form",function(){
				var form = layui.form;
			 	form.render();
			 	//查询
			 	select();
			 	function select(){
			 		var lists = {
						"list":[{
							"account":"liulinlin",
							"name":"肖静怡",
							"mobile":"15074475336",
							"address":"岳阳",
							"birthday":"1998-03-01"
						},{
							"account":"gusheng",
							"name":"花花",
							"mobile":"15074275336",
							"address":"北京",
							"birthday":"2004-03-04"
						},{
							"account":"liangsheng",
							"name":"apple",
							"mobile":"15074295336",
							"address":"上海",
							"birthday":"2009-03-04"
						},{
							"account":"gusheng",
							"name":"姜生",
							"mobile":"150674275336",
							"address":"魏家平",
							"birthday":"2004-08-04"
						},{
							"account":"chongai",
							"name":"娜娜",
							"mobile":"150634275336",
							"address":"重庆",
							"birthday":"2000-08-04"
						},{
							"account":"yangmei",
							"name":"杨梅",
							"mobile":"150674265336",
							"address":"山上",
							"birthday":"2004-08-04"
						},{
							"account":"shanzha",
							"name":"山楂",
							"mobile":"150674265336",
							"address":"山上",
							"birthday":"2009-08-04"
						},{
							"account":"ganzhe",
							"name":"苹果",
							"mobile":"150674265336",
							"address":"树上",
							"birthday":"2008-08-04"
						},{
							"account":"caixukun",
							"name":"拉拉",
							"mobile":"150674265336",
							"address":"湖南",
							"birthday":"2004-08-04"
						},{
							"account":"yiyangqianxi",
							"name":"华晨宇",
							"mobile":"150674265336",
							"address":"长沙",
							"birthday":"2004-08-04"
						}]
					}
			 		
			 		var list = lists.list;
					$.each((list), function(index,item) {
						var tr = $("<tr></tr>");
				 		
				 		var checkboxTd = $("<td></td>").append("<input type='checkbox' lay-skin='primary'>");
				 		//添加了一个参数attr  和一个类样式addClass
				 		var td1 = $("<td></td>").append(item.account);
				 		var td2 = $("<td></td>").append(item.name);
				 		var td3 = $("<td></td>").append(item.mobile);
				 		var td4 = $("<td></td>").append(item.address);
				 		var td5 = $("<td></td>").append(item.birthday);
				 		var checkboxsTd = $("<td></td>").append("<input type='checkbox' name='' lay-skin='switch'>");
				 		var btnTd = $("<td></td>").append("<a href='#' class='layui-btn layui-btn-sm updateUser' >编辑</a>&nbsp;<a href='#' class='layui-btn layui-btn-sm'>重置密码</a>&nbsp;<a href='#' class='layui-btn layui-btn-sm layui-btn-danger deleteUser' >删除</a>");
				 		tr.append(checkboxTd).append(td1).append(td2).append(td3).append(td4).append(td5).append(checkboxsTd).append(btnTd).appendTo($("#tbody"));
				 		form.render();
					});
			 	}
			 	//添加
				function add(){
					//获取文本框输入的值
					var account = $("#account").val();
			 		var name = $("#name").val(); 
			 		var mobile = $("#mobile").val(); 
			 		var address = $("#address").val(); 
			 		var birthday = $("#birthday").val(); 
			 		
			 		//var tbody = $("#userTable").children("tbody");
			 		var tr = $("<tr></tr>");
			 		
			 		var checkboxTd = $("<td></td>").append("<input type='checkbox' lay-skin='primary'>");
			 		//添加了一个参数attr  和一个类样式addClass
			 		var td1 = $("<td></td>").append(account).attr("num",1).addClass("td");
			 		var td2 = $("<td></td>").append(name);
			 		var td3 = $("<td></td>").append(mobile);
			 		var td4 = $("<td></td>").append(address);
			 		var td5 = $("<td></td>").append(birthday);
			 		var checkboxsTd = $("<td></td>").append("<input type='checkbox' name='' lay-skin='switch'>");
			 		var btnTd = $("<td></td>").append("<a href='#' class='layui-btn layui-btn-sm updateUser' >编辑</a>&nbsp;<a href='#' class='layui-btn layui-btn-sm'>重置密码</a>&nbsp;<a href='#' class='layui-btn layui-btn-sm layui-btn-danger deleteUser' >删除</a>");
			 		tr.append(checkboxTd).append(td1).append(td2).append(td3).append(td4).append(td5).append(checkboxsTd).append(btnTd).appendTo($("#tbody"));
			 		form.render();
				}
				
				$(".addUser").click(function(){
					add();
			 	});
			 	
			 	//删除
			 	$(document).on('click','.deleteUser',function(){
			 		var rrr = $(this).parent().parent();
			 		console.log(rrr);
			 		$(this).parent().parent().remove();
			 	});
			 	
			 	//编辑
			 	$(document).on('click','.updateUser',function(){
			 		//获取文本框输入的值
			 		var account = $("#account").val();
			 		var name = $("#name").val(); 
			 		var mobile = $("#mobile").val(); 
			 		var address = $("#address").val(); 
			 		var birthday = $("#birthday").val(); 
			 		
			 		$(this).parent().parent().children().eq(1).text(account);
			 		$(this).parent().parent().children().eq(2).text(name);
			 		$(this).parent().parent().children().eq(3).text(mobile);
			 		$(this).parent().parent().children().eq(4).text(address);
			 		$(this).parent().parent().children().eq(5).text(birthday);
			 	});
			 	
			});
			/*layui.use(['form','element'], function(){
				var form = layui.form;
			 	form.render();
			 	$(function(){
			 		function add(){
			 			//获取文本框输入的值
			 			var account = $("#account").val();
			 			var name = $("#name").val(); 
			 			var mobile = $("#mobile").val(); 
			 			var address = $("#address").val(); 
			 			var birthday = $("#birthday").val(); 
			 			
			 			//获取userTable的子节点tbody
			 			var tbody = $("#userTable").children("tbody");
			 			//字符串拼接tr
			 			var tr = "<tr>"
			 			tr += "<tr><td><input type='checkbox' lay-skin='primary'></td>";
			 			tr += "<td>"+account+"</td>";
			 			tr += "<td>"+name+"</td>";
			 			tr += "<td>"+mobile+"</td>";
			 			tr += "<td>"+address+"</td>";
			 			tr += "<td>"+birthday+"</td>";
			 			tr += "<td><input type='checkbox' name='' lay-skin='switch'></td>";
			 			tr += "<td><a href='#' class='layui-btn layui-btn-sm' >编辑</a>&nbsp;<a href='#' class='layui-btn layui-btn-sm'>重置密码</a>&nbsp;<a href='#' class='layui-btn layui-btn-sm layui-btn-danger' >删除</a></td>";
			 			tr += "</tr>";
			 			//
			 			tbody.append(tr);
			 			form.render();
			 		}
			 		$(".addUser").click(function(){
			 			add();
			 		});
		 		});
		 	});*/
		</script>
	</body>
</html>
